import React, { Component } from 'react'
import moment from 'moment'
import { Select, Form, Input, TimePicker } from 'antd'

import {
  experience,
  education,
  salary,
  job_intention
} from '../../utils/constants'

const Item = Form.Item
const Option = Select.Option

class SearchForm extends Component {

  componentWillMount() {
    this.props.setForm(this.props.form)
  }

  render() {
    const format = 'HH:mm';

    const formItemLayout = {
      labelCol: {
        xs: { span: 4 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 20 },
      },
    };

    const { getFieldDecorator } = this.props.form
    return (
      <Form {...formItemLayout}>

        <Item label="职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位">
          {
            getFieldDecorator('jobTitle', {
              rules: [
                { required: true, message: '职位必须输入' }
              ]
            })(
              <Input placeholder="请输入职位" maxLength={10} />
            )
          }
        </Item>

        <Item label="处理时间" required>
          <Item
            style={{ display: 'inline-block' }}
          >
            {
              getFieldDecorator('startTime', {
                initialValue: moment('08:00', format),
                rules: [
                  { required: true, message: '请输入开始时间' }
                ]
              })(
                <TimePicker format={format} placeholder="start time"/>
              )
            }
            
          </Item>
          <span style={{ 
            display: 'inline-block', 
            width: '4px',
            textAlign: 'center',
            marginLeft: 4,
            marginRight: 4
            }}>- 
          </span>
          <Item style={{ display: 'inline-block' }}>
            {
              getFieldDecorator('endTime', {
                initialValue: moment('20:00', format),
                rules: [
                  { required: true, message: '请输入结束时间' }
                ]
              })(
                <TimePicker format={format} placeholder="end time" />
              )
            }
          </Item>
        </Item>

        <Item label="经&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;验">
          {
            getFieldDecorator('jobTime', {
              rules: [
                { required: true, message: '经验必须输入' }
              ]
            })(
              <Select
                mode="multiple"
                placeholder="请选择经验"
              >
                {
                  experience.map(c => <Option value={c.title} key={c.title}>{c.title}</Option>)
                }
              </Select>
            )
          }
        </Item>

        <Item label="学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历">
          {
            getFieldDecorator('degree', {
              rules: [
                { required: true, message: '学历必须输入' }
              ]
            })(
              <Select
                mode="multiple"
                placeholder="请选择学历"
              >
                {
                  education.map(c => <Option value={c.title} key={c.title}>{c.title}</Option>)
                }
              </Select>
            )
          }
        </Item>

        <Item label="薪资待遇">
          {
            getFieldDecorator('salary', {
              rules: [
                { required: true, message: '待遇必须输入' }
              ]
            })(
              <Select
                placeholder="请选择薪资待遇"
              >
                {
                  salary.map(c => <Option value={c.title} key={c.title}>{c.title}</Option>)
                }
              </Select>
            )
          }
        </Item>

        <Item label="求职意向">
          {
            getFieldDecorator('intention', {
              rules: [
                { required: true, message: '求职意向必须输入' }
              ]
            })(
              <Select
                mode="multiple"
                placeholder="请选择求职意向"
              >
                {
                  job_intention.map(c => <Option value={c.title} key={c.title}>{c.title}</Option>)
                }
              </Select>
            )
          }
        </Item>

      </Form>
    )
  }
}

export default Form.create()(SearchForm)
